<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<c:set var="contestPath" value="<%=request.getContextPath()%>"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
	<head>
		<title>学生列表</title>
		<style>
			.student span{
				max-width: 580px;
				word-wrap: break-word;
			}
			.student label {
				width: 120px;
				text-align: right;
				margin: 0 10px 0 10px;
			}
		</style>
		<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/foundation-datepicker.css"/>
		<script src="${pageContext.request.contextPath}/static/lib/foundation-datepicker.js" type="text/javascript"></script>
		<script src="${pageContext.request.contextPath}/static/lib/ajaxfileupload.js" type="text/javascript"></script>
		<script type="text/javascript">
			$(function(){
				$( ".date" ).fdatepicker({
					format: 'yyyy-mm-dd'
				});
				
				$("#addStudentBtn").click(function(){
					$('#addStudentModal').modal('show');
				});
				
				$('#addStudentSaveBtn').click(function(){
					var id = $('#addStudentFrom input[name="id"]').val();
					var name = $('#addStudentFrom input[name="name"]').val();
					var gender = $('#addStudentFrom input[name="gender"]:radio:checked').val();
					var birthday = $('#addStudentFrom input[name="birthday"]').val();
					var tel = $('#addStudentFrom input[name="tel"]').val();
					var email = $('#addStudentFrom input[name="email"]').val();
					var address = $('#addStudentFrom input[name="address"]').val();
					$.ajax({
						type: 'POST',
						url: '${contestPath}/studentAdd',
						data: {
							userId: id,
							userName: name,
							gender: gender,
							birthday: birthday,
							tel: tel,
							email: email,
							address: address
						},
						dataType: "json",
						success: function(data){
							if(data.success){
								alert('添加成功！');
								window.location.reload();
							}else{
								var messageMap = data.messageMap;
								for(var key in messageMap){
									var value = messageMap[key];
									$('#addStudentFrom input[name="' + key + '"]').after('<label class"jsr303-message-label">' + value + '</label>');
								}
								alert('添加失败！' + messageMap['message']);
							}
						}
					});
				});
				
				$(".edit-stu").click(function(){
					var id = $(this).val();
					$.ajax({
						type: "POST",
						url: "${contestPath}/getStudentById",
						data: {
							userId: id
						},
						dataType: "json",
						success: function(data){
							$('#editStudentFrom input[name="id"]').val(data.userId);
							$('#editStudentFrom input[name="name"]').val(data.userName);
							if(data.gender == '1'){
								$('#editStudentFrom input:radio[value="1"]').attr('checked',true);
							}
							$('#editStudentFrom input[name="birthday"]').val(data.birthday);
							$('#editStudentFrom input[name="tel"]').val(data.tel);
							$('#editStudentFrom input[name="email"]').val(data.email);
							$('#editStudentFrom input[name="address"]').val(data.address);
							
						}
					});
					
					$('#editStudentModal').modal('show');
				});
				
				$('#editStudentUpdateBtn').click(function(){
					var id = $('#editStudentFrom input[name="id"]').val();
					var name = $('#editStudentFrom input[name="name"]').val();
					var gender = $('#editStudentFrom input[name="gender"]:radio:checked').val();
					var birthday = $('#editStudentFrom input[name="birthday"]').val();
					var tel = $('#editStudentFrom input[name="tel"]').val();
					var email = $('#editStudentFrom input[name="email"]').val();
					var address = $('#editStudentFrom input[name="address"]').val();
					$.ajax({
						type: 'POST',
						url: '${contestPath}/studentEdit',
						data: {
							userId: id,
							userName: name,
							gender: gender,
							birthday: birthday,
							tel: tel,
							email: email,
							address: address
						},
						dataType: "json",
						success: function(data){
							if(data.success){
								alert('添加成功！');
								window.location.reload();
							}else{
								var messageMap = data.messageMap;
								for(var key in messageMap){
									var value = messageMap[key];
									$('#editStudentFrom input[name="' + key + '"]').after('<label class"jsr303-message-label">' + value + '</label>');
								}
								alert('添加失败！' + messageMap['message']);
							}
						}
					});
				});
				
				$('#uploadFile').ace_file_input({
					style:'well',
					btn_choose:'Drop files here or click to choose',
					btn_change:null,
					no_icon:'ace-icon fa fa-cloud-upload',
					droppable:true,
					thumbnail:'samll',
					preview_error: function(filename, eroor_code) {
					}
				}).on('change', function(){
//					consloe.log($(this).data('ace_input_files'));
//					consloe.log($(this).data('ace_input_method'));
				});

				$('#batchAddStudentBtn').click(function(){
					$('#uploadFileModal').modal('show');
				});

				$('#subjectStudentSaveBtn').on('click', function(){
					$.ajaxFileUpload({
						url: '${contestPath}/teacher/uploadFile',
						secureuri: false,
						fileElementId: 'uploadFile',
						dataType: 'json',
						complete: function(data){
							//alert(data);
						},
						success: function (data, status) {
 							if(data.success ) {
								alert('成功');
								window.location.reload();
							}else {
								alert(data.messageMap.message);
							}
						},
						error: function(data, status, e){
							alert(e);
						}
					});
				});
				
				$(".delete-stu").click(function(){
					var id = $(this).val();
					if(confirm("是否确认删除？")){
						$.ajax({
							type: 'POST',
							url: '${contestPath}/deleteStudent',
							data: {
								userId: id,
							},
							dataType: "json",
							success: function(data){
								if(data.success){
									alert('删除成功！');
									window.location.reload();
								}else{
									var messageMap = data.messageMap;
									alert('删除失败！' + messageMap['message']);
								}
							}
						});
					}else{
						return;
					}
				});
			});
		</script>
	</head>

	<body>
		<div id="messageDiv">
			<c:if test="${not empty message }">
				<script type="text/javascript">
					alert("${message}");
				</script>
			</c:if>
		</div>
		<%@include file="/WEB-INF/view/common/date.jsp"%>
		<!-- 添加学生-模态框（Modal） -->
		<div class="modal fade" id="addStudentModal" tabindex="-1" role="dialog" aria-labelledby="addStudentModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content" style="width:400px;margin:auto">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="addStudentModalLabel">添加学生信息</h4>
		            </div>
		            <div class="modal-body student">
		            	<form id="addStudentFrom" method="post">
		            	<p><label>学号:</label><input type="text" name="id"></p>
		            	<p><label>姓名:</label><input type="text" name="name"></p>
		            	<p><label>性别:</label><input type="radio" name="gender" value="0" checked/>男&nbsp;&nbsp;<input type="radio" name="gender" value="1"/>女</p>
		            	<p><label>出生年月:</label><input type="text" name="birthday" class="date"></p>
		            	<p><label>电话:</label><input type="text" name="tel"></p>
		            	<p><label>邮箱:</label><input type="text" name="email"></p>
		            	<p><label>住址:</label><input type="text" name="address"></p>
		            	</form>
					</div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		                <button id="addStudentSaveBtn" type="button" class="btn btn-primary">保存</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>
		
		<!-- 修改学生-模态框（Modal） -->
		<div class="modal fade" id="editStudentModal" tabindex="-1" role="dialog" aria-labelledby="editStudentModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content" style="width:400px;margin:auto">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		                <h4 class="modal-title" id="editStudentModalLabel">修改学生信息</h4>
		            </div>
		            <div class="modal-body student">
		            	<form id="editStudentFrom" method="post">
		            	<p><label>学号:</label><input type="text" name="id"></p>
		            	<p><label>姓名:</label><input type="text" name="name"></p>
		            	<p><label>性别:</label><input type="radio" name="gender" value="0" checked/>男&nbsp;&nbsp;<input type="radio" name="gender" value="1"/>女</p>
		            	<p><label>出生年月:</label><input type="text" name="birthday" class="date"></p>
		            	<p><label>电话:</label><input type="text" name="tel"></p>
		            	<p><label>邮箱:</label><input type="text" name="email"></p>
		            	<p><label>住址:</label><input type="text" name="address"></p>
		            	</form>
					</div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		                <button id="editStudentUpdateBtn" type="button" class="btn btn-primary">保存</button>
		            </div>
		        </div><!-- /.modal-content -->
		    </div><!-- /.modal -->
		</div>

		<!-- /section:settings.box -->
		<div class="page-content-area">

			<!-- 上传-模态框（Modal） -->
			<div class="modal fade" id="uploadFileModal" tabindex="-1" role="dialog" aria-labelledby="uploadFileModalLabel" aria-hidden="true">
			    <div class="modal-dialog">
			        <div class="modal-content">
			            <div class="modal-header">
			                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			                <h4 class="modal-title" id="uploadFileModalLabel">上传</h4>
			            </div>
			            <div class="modal-body">
			            	<input id="uploadFile" name="uploadFile" type="file">
						</div>
			            <div class="modal-footer">
			                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			                <button id="subjectStudentSaveBtn" type="button" class="btn btn-primary">上传</button>
			            </div>
			        </div><!-- /.modal-content -->
			    </div><!-- /.modal -->
			</div>

			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					<div class="row">
						<div class="col-xs-12">
							<button id="addStudentBtn" type="button" class="btn btn-xs btn-success">
                               	<i class="ace-icon fa fa-plus bigger-120"></i>添加学生信息
                               </button>
                               <button id="batchAddStudentBtn" type="button" class="btn btn-xs btn-success">
                               	<i class="ace-icon fa fa-plus bigger-120"></i>批量添加学生信息
                               </button>
							<table id="sample-table-1" class="table table-striped table-bordered table-hover">
								<thead>
									<tr>
										<th class="center" width=50>
											<label class="position-relative">
												<input type="checkbox" class="ace" />
												<span class="lbl"></span>
											</label>
										</th>
                                        <th>学号</th>
									    <th>姓名</th>
									    <th>性别</th>
									    <th>出生年月</th>
									    <th>电话</th>
									    <th>邮箱</th>
									    <th>住址</th>
									    <th>操作</th>
                                     </tr>
                                         	
								</thead>

								<tbody>
                                         <c:forEach items="${studentList }" var="student">
                                             <tr>
                                                     <td class="center">
                                                         <label class="position-relative">
                                                             <input type="checkbox" class="ace" />
                                                             <span class="lbl"></span>
                                                         </label>
                                                     </td>
                                                     <td>${student.userId }</td>
                                                     <td>${student.userName }</td>
                                                     <td>${student.gender }</td>
                                                     <td>${student.birthday }</td>
                                                     <td>${student.tel }</td>
                                                     <td>${student.email }</td>
                                                     <td>${student.address }</td>
										<td>
											<button class="btn btn-xs btn-info edit-stu" value="${student.userId }">
												<i class="ace-icon fa fa-pencil bigger-120"></i>
											</button>

											<button class="btn btn-xs btn-danger delete-stu" value="${student.userId }">
												<i class="ace-icon fa fa-trash-o bigger-120"></i>
											</button>
										</td>
									</tr>
								</c:forEach>
								</tbody>
							</table>
						</div><!-- /.span -->
					</div><!-- /.row -->

					<div class="hr hr-18 dotted hr-double"></div>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div><!-- /.page-content-area -->
	</body>
</html>
